<template>
<div class="container">
    <el-card>
        <div slot="header" class="clearfix">
            <span>文档管理</span>
        </div>
        <div>
            <el-form :inline="true" :model="queryList" class="demo-form-inline">
                <el-form-item label="文档名称">
                    <el-input v-model="queryList.condition.documentName" placeholder="请输入文档名称" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-date-picker
                        style="width: 240px;"
                        v-model="queryList.condition.date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="操作用户">
                    <el-input v-model="queryList.condition.username" placeholder="请输入操作用户" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>

            <div>
                <el-button type="primary" :disabled="!isSelect" @click="openTransferDialog">文档所有者权限转让</el-button>
                <el-button type="primary" :disabled="!isSelect" @click="openRemoveDialog">被授权人权限删除</el-button>
            </div>

            <el-table :data="tableData" style="width: 100%" v-loading="loading" @selection-change="selectTable" ref="table">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="documentName" label="文档名称" width="180"></el-table-column>
                <el-table-column prop="date" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="username" label="文档所有者"></el-table-column>
                <el-table-column prop="department" label="所有者所属部门"></el-table-column>
                <el-table-column label="被授权者" width="300">
                    <template slot-scope="scope">
                        <el-popover
                            placement="top"
                            width="100%"
                            trigger="hover"
                            :content="scope.row.authorized">
                            <div class="text-overflow" slot="reference">{{ scope.row.authorized }}</div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="$router.push(`/auth/${scope.row.id}`)" type="text" size="small">权限</el-button>
                        <el-button @click="$router.push(`/outgoing/${scope.row.id}`)" type="text" size="small">外发</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>

    <!-- <Pagination
        v-show="queryList.total > 0"
        :total="queryList.total"
        :limit.sync="queryList.pageSize"
        @pagination="pagination"/> -->
</div>
</template>

<script>
import { list, detail } from '@/api/manageApi'
import { queryParams } from '@/assets/mixins'
// import Pagination from '@/components/Pagination'
export default {
    name: 'ManagePage',
    mixins: [queryParams],
    components: {
        // Pagination
    },
    created () {
        this.initData()
    },
    data () {
        return {
            tableData: [],
            checkData: [],
            loading: true,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            }
        }
    },
    computed: {
        isSelect () {
            return this.checkData.length > 0
        }
    },
    methods: {
        initData () {
            this.loading = true
            setTimeout(() => {
                const { data } = list()
                this.tableData = data
                this.queryList.total = data.length
                this.loading = false
            }, 1000)
            console.log(detail())
        },
        search () {
            console.log('object')
        },
        selectTable (selection, row) {
            this.checkData = selection
        },
        // 打开权限转让
        async openTransferDialog () {
            const html = '<strong>确认要转让所选文档的文档所有者吗?</strong><br/> 所有者权限转让后，新承接人将成为文档的所有者，原文档所有者将无法打开文档。'
            try {
                await this.$confirm(html, '权限转让', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true
                })
                this.$message('操作成功！')
                this.$refs.table.clearSelection()
            } catch (error) {

            }
        },
        // 删除授权人
        async openRemoveDialog () {
            const html = '<strong>确认要删除所选文档的被授权人的权限吗?</strong><br/> 权限删除后，以上指定人将无法打开此文档。'
            try {
                await this.$confirm(html, '权限删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true
                })
                this.$message('操作成功！')
                this.$refs.table.clearSelection()
            } catch (error) {

            }
        }
    }
}
</script>

<style scoped>
.text-overflow{
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>
